<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <style >
        
        .map{
            /* padding: 3vw 3vw 5vw 3vw; */
            display: flex;
            flex-flow: wrap;
        }
        .picture{
            width: 100%;
            /* height: 100px; */
            margin-right: 3vw; 
            display: flex;
            flex-wrap: wrap;
        }
        .picture img{
            width: 30vw;
            height: 30vw;
            margin: 1vw 1vw;
        }

        #choose-btn{
            display: flex;
            width: 20vw;
            height: 20vw;
            border: solid 0.5vw rgb(207, 207, 207);
            color: rgb(207, 207, 207);
            font-size:20vw;
            font-weight: bold;
            text-align: center;
            background-size: 100% 100%;
            justify-content: center;
            align-items: center;
            margin: 0 1vw;
            font-weight: normal;
        }
        #file-fileld{
            display: none;
        }
        .updata{
            background-color: rgb(0, 102, 255);
            color: white;
            width: 100px;
            height: 30px;
        }
        .b{
            width: 100px;
            height: 100px;
            position: relative;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            padding: 5px;
            margin: 5px
        }
        .b img{
            width: 100%;
            height: 100%;

        }
        body{
            margin: 0;
            text-align: center;
            box-sizing: border-box;
        }
        .A{
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }
        .X{
            background-color: rgb(0, 102, 255);;
            width: 20px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            position: absolute;
            top: 0;
            right: 0;
            border-radius: 50%;
            border: none;
        }
        .c{
            width: 80%;
            height: 30px;
            margin: 5px 0;
        }
        #choose-btn{
            display: flex;
            width:100px;
            height: 100px;
            border: solid 0.5vw rgb(207, 207, 207);
            color: rgb(207, 207, 207);
            font-size:20vw;
            font-weight: bold;
            text-align: center;
            background-size: 100% 100%;
            justify-content: center;
            align-items: center;
            /* padding: 5px; */
            margin: 10px 5px;
            font-weight: normal;
        }
        #file-fileld{
            display: none;
        }
        .head{
            width: 100%;
            background-color: rgb(0, 102, 255);
            font-size: 6vw;
            color: white;
            text-align: center;
        }
        .head img{
            width: 40vw;
            height: 30vw;
        }
         
        .lump{
            width: 70%;
            padding: 3vw;
            
            background-color: rgb(0, 102, 255);
            margin:  8vw auto;
            border-radius: 10px;
            color:white;
        }
    </style>
</head>
<body>
    <div class="head">
        <img src="static/admin/images/早早番茄白.png">
    </div>
    <div class="A">
    {volist name="data" id="vol"}
        <div class="b">
            
            <button class="X" onclick="quxiao('{$vol['guid']}')">X</button>
            <img src="{$vol['faceUrl']}">
        </div>
    {/volist}
    </div>
    {if condition="$num!='3'"}
    <a href="{:url('upload')}?id={$memberinfo.id}">
        <div class="lump">上传照片</div>
    </a>
    {/if}
    
  <div style="text-align: left;margin-top: 10vw;margin-left: 10vw;">
      <b>温馨提示:</b>
      <br>
      1.每个人只能上传3张图片
     
  </div>

 
    <script src="static/index/js/jquery.js"></script>
<script>

    function quxiao(e) {
        if(confirm('删除后无法恢复，是否删除？')){
            var guid= "{$memberinfo['guid']}";
            $.post("{:url('delimage')}",{photoid:e,personGuid:guid},function (data) {
                if (data.errcode=="0"){
                    alert(data.msg);
                    window.location.reload();
                }else{
                    alert(data.msg);
                }
            },"json")
        }
        
    }

</script>
</body>
</html>